<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live region notification demo</title>
  <style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  h1, h2 {
    color: #333;
    margin-bottom: 30px;
  }

  h2 {
    margin-top: 40px;
  }

  input, 
  textarea {
    font-size: 16px;
  }

  .controls {
    margin-bottom: 20px;
  }

  select {
    font-size: 16px;
    padding: 4px;
    margin-left: 8px;
  }

  button {
    background: #0066cc;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
    padding: 8px 16px;
  }

  button:hover {
    background: #0052a3;
  }

  #notification {
    background: #f0f0f0;
    border-radius: 4px;
    margin-top: 20px;
    min-height: 50px;
    padding: 15px;
  }

  .instructions {
    background: #f8f8f8;
    border-left: 4px solid #0066cc;
    margin: 20px 0;
    padding: 20px;
  }

  .instructions h3 {
    margin-top: 0;
  }

  .instructions ol {
    padding-left: 20px;
    line-height: 1.5;
  }

  .instructions li {
    margin-bottom: 10px;
  }

  kbd {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: monospace;
  }
  </style>
</head>
<body>
  <h1>Live region notification demo</h1>

  <section class="instructions">
    <h3>Testing with VoiceOver on macOS</h3>
    <ol>
      <li>Press <kbd>Command</kbd> + <kbd>F5</kbd> to turn on VoiceOver
        <ul>
          <li>If using a Touch Bar MacBook, press the Touch ID button three times</li>
          <li>If prompted, click "Use VoiceOver" in the dialog</li>
        </ul>
      </li>
      <li>Try clicking both buttons below to hear the notifications</li>
      <li>When finished, press <kbd>Command</kbd> + <kbd>F5</kbd> again to turn off VoiceOver (or triple-press Touch ID)</li>
    </ol>
  </section>

  <section class="instructions">
    <h3>Testing with VoiceOver on iOS</h3>
    <ol>
      <li>Go to Settings → Accessibility → VoiceOver</li>
      <li>Toggle VoiceOver on
        <ul>
          <li>You can also add VoiceOver to Accessibility Shortcut: Settings → Accessibility → Accessibility Shortcut</li>
          <li>Then triple-click the side button to toggle VoiceOver</li>
        </ul>
      </li>
      <li>Basic VoiceOver gestures:
        <ul>
          <li>Tap once to select an item</li>
          <li>Double-tap anywhere to activate the selected item</li>
          <li>Swipe right/left with one finger to move to next/previous item</li>
        </ul>
      </li>
      <li>Try using the buttons below to hear the notifications</li>
      <li>When finished, return to Settings → Accessibility → VoiceOver and toggle it off
        <ul>
          <li>Or use your Accessibility Shortcut if configured</li>
        </ul>
      </li>
    </ol>
  </section>

  <h2>Demo</h2>

  <div class="controls">
    <label for="liveType">Live region type: </label>
    <select id="liveType">
      <option value="assertive">Assertive</option>
      <option value="polite">Polite</option>
    </select>
  </div>
  
  <div class="demo-buttons">
    <button id="notifyNow">Insert notification now</button>
    <button id="notifyLater">Insert notification in ten seconds</button>
  </div>

  <div id="notification" aria-live="assertive"></div>

  <script type="module">
const notificationElement = document.getElementById('notification')
const notifyNowButton = document.getElementById('notifyNow')
const notifyLaterButton = document.getElementById('notifyLater')
const liveTypeSelect = document.getElementById('liveType')

liveTypeSelect.addEventListener('change', (event) => {
  notificationElement.setAttribute('aria-live', event.target.value)
})

function insertNotification() {
  const time = new Date().toLocaleTimeString()
  notificationElement.textContent = `A notification was inserted at ${time}`
}

notifyNowButton.addEventListener('click', insertNotification)

notifyLaterButton.addEventListener('click', () => {
  const startTime = new Date().toLocaleTimeString()
  notificationElement.textContent = 'A notification has been scheduled'
  
  setTimeout(() => {
    insertNotification()
  }, 10000)
})
  </script>
</body>
</html>
